<template>
  <div>
    <brack :params1="'商品管理'" :params2="'商品分类'"></brack>
    <el-card class="box-card">
      <el-button type="primary" class="btn">添加分类</el-button>
      <!-- 树形图 -->
      <tree-table :data="list" :columns="columns" border>
        <template slot="cat_level" scope="scope">
          <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level == 1">二级</el-tag>
          <el-tag v-else>三级 </el-tag>
        </template>
        <template slot="cat_deleted" scope="scope">
          <i
            class="el-icon-success"
            style="color: lightgreen"
            v-if="!scope.row.cat_deleted"
          ></i>
        </template>
      </tree-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="+obj.pagenum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="obj.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { categoriesSort_api } from "@/api";
export default {
  data() {
    return {
      list: [],
      total: 0,
      obj: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      columns: [
        { label: "分类名称", align: "left", prop: "cat_name", tree: true },

        {
          label: "是否有效",
          align: "center",
          prop: "cat_deleted",
          template: "cat_deleted",
          type: "template"
        },
        {
          label: "排序",
          align: "center",
          prop: "cat_level",
          template: "cat_level",
          type: "template"
        },
        {
          label: "操作",
          align: "center",
          prop: "action",
          template: "action",
          type: "template",
          width: "180px"
        }
      ]
    };
  },
  created() {
    this.categories();
  },
  methods: {
    async categories() {
      const { data: res } = await categoriesSort_api(this.obj);
      console.log(res);
      this.list = res.data.result;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.obj.pagesize = val;
      this.categories();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.obj.pagenum = val;
      this.categories();
    }
  }
};
</script>
<style scoped lang="less">
.el-card {
  margin: 20px 0;
  .el-card__body {
    .el-button {
      margin-bottom: 20px;
    }
  }
}
</style>
